<template>
  <div class="instruction">
    <div class="instruction__questions">
      <ul>
        <li v-for="(item,index) in question_list" :key="index" :class="item.item_class">
          <div @click="toggleQuestion(index)" class="title">{{item.title}}<span size="25" class="fright iconfont icon-xiala2"></span></div>
          <div class="content">{{item.content}}</div>
        </li>
      </ul>
    </div>
<!--    <div class="instruction__position_guide">-->
<!--      <img :src="position_guide">-->
<!--    </div>-->
<!--    <div class="instruction__steps">-->
<!--      <div class="title">充电收费须知</div>-->
<!--      <div>智能充电桩收费按照不同城市不同物业的收费标准会有不同的价格，具体的费用请扫码知晓。</div>-->
<!--      <div class="title">微信充电使用步骤</div>-->
<!--      <div>1、选择空闲插座插入电动自行车充电器</div>-->
<!--      <div>2、打开微信扫一扫，扫描插座或箱体左上方的二维码，进行扫码。</div>-->
<!--      <div class="vimportant">注：首次使用，先扫二维码关注物易联公众号绑定手机号。</div>-->
<!--      <div class="step_image">-->
<!--        <img src="">-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>


<script>
    import position_guide from "@/assets/image/instruction/position_guide.jpg";
    import step1 from "@/assets/image/instruction/step1.jpg";
    import step2 from "@/assets/image/instruction/step2.jpg";
    import step3 from "@/assets/image/instruction/step3.jpg";
    import step4 from "@/assets/image/instruction/step4.jpg";
    import step5 from "@/assets/image/instruction/step5.jpg";
    import step6 from "@/assets/image/instruction/step6.jpg";
    import step7 from "@/assets/image/instruction/step7.jpg";
    export default {
        data() {
            return {
                position_guide: position_guide,
                question_list_source:[
                    {"title":"礼金券怎么使用？","content":"礼金券充电时直接抵扣40%充电费用，例如充电费用1元，从余额支付0.6元，礼金券抵扣0.4元。"},
                    {"title":"充电收费标准？","content":"现在的计费标准，每个城市都是自己设置的，电动车功率不同，功率大的费用也相对高一些。"},
                    {"title":"如何退款？","content":"如果你不再充电了，可以联系客服热线处理，在个人中心可以直接联系。退本金，充值活动赠送的礼金券会失效。"},
                    {"title":"充电卡挂失与转移卡余额","content":"正常情况下，在电池接近充满的时候，会进入涓流充电期，等功率在很低的状态下保持一段时间，系统判断电池充满了，才会自动断电。"},
                    {"title":"什么情况下会自动断电？","content":"如果你不再充电了，可以联系客服热线处理，在个人中心可以直接联系。退本金，充值活动赠送的礼金券会失效。"},
                    {"title":"同一个车充电费用会有差异？","content":"现在的计费标准，每个城市都是自己设置的，电池剩余电量不同，充电的功率会有差异，功率大的费用也相对高一些。"},
                    {"title":"提示“功率达到上限”是什么原因？","content":"当单个车辆功率或者多个设备的功率加起来达到了充电桩功率上限时，会出现此提示。"},
                    {"title":"充电桩不可用？","content":"当电动车功率达到了充电桩功率上限时，无法正常充电"},
                    {"title":"白屏、页面打不开？","content":"清除一下微信的缓存，然后再刷新一下页面试试"}
                ],
                question_list:[]
            };
        },
        methods:{
            toggleQuestion(index){
                this.initQuestionList()
                let liObj=this.question_list[index];
                liObj.item_class="item_choose";
                this.$set(this.question_list, index, liObj);
            },
            initQuestionList(){
                this.question_list_source.forEach(item=>{
                    item.item_class="item_not_choose"
                })
                this.question_list=this.question_list_source
            }
        },
        mounted() {
            this.initQuestionList()
        }
    };
</script>
<style>
.item_not_choose{
  background: #020D3E;
}
.icon{
  float: right;
}
</style>
